import * as React from 'react';
import { Button, Input } from 'antd';

interface Iprops {
  tags: string[]
  editing: boolean
  onSave(a: string): void
  onClickItem(tag: string): void
}
export default class BookTag extends React.Component<Iprops> {
  constructor(props: Iprops) {
    super(props)
  }

  public save = (event: React.KeyboardEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement>) => {
    const target = event.target as HTMLInputElement;
    this.props.onSave(target.value)
  }

  public render() {
    if (this.props.editing) {
      return (<Input placeholder="以空格分割标签" onPressEnter={this.save} onBlur={this.save} defaultValue={this.props.tags.join(' ')} />)
    }
    return (
      <div>
        {
          this.props.tags.map((tag) =>
            (<Button type="primary" key={tag} size="small" onClick={() => this.props.onClickItem(tag)} className="tag" >{tag}</Button>)
          )
        }
      </div>
    );
  }
}
